<template>
	<view class="container">
		<view class="blue_bg" />
		<view class="coupons_body">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" :modelValue="coupons">
				<uni-forms-item label="优惠券名称" :label-width="label_width">
					<uni-easyinput v-model="coupons.name" />
				</uni-forms-item>
				<uni-forms-item label="优惠券类型" :label-width="label_width">
					<uni-data-checkbox v-model="coupons.type" :localdata="types" />
				</uni-forms-item>

				<view class="example" style="margin-left: 26vw;">
					<view v-if="coupons.type === 0">
						满<input v-model="coupons.full" />元减<input v-model="coupons.reduce" />元
					</view>
					<view v-if="coupons.type === 1">
						打<input v-model="coupons.full" />折
					</view>
				</view>

				<uni-forms-item label="发放开始时间" :label-width="label_width">
					<uni-datetime-picker type="datetime" return-type="timestamp" v-model="coupons.date_start"
						:placeholder="coupons.startTime" />
				</uni-forms-item>
				<uni-forms-item label="发放结束时间" :label-width="label_width">
					<uni-datetime-picker type="datetime" return-type="timestamp" v-model="coupons.date_end"
						:placeholder="coupons.endTime" />
				</uni-forms-item>

				<uni-forms-item label="投放数量" :label-width="label_width">
					<u--input border="surround" type="number"></u--input>
				</uni-forms-item>
				<uni-forms-item label="每人限领" :label-width="label_width">
					<u--input v-model="coupons.limited" border="surround" type="number"></u--input>
				</uni-forms-item>
				<uni-forms-item label="使用有效期" :label-width="label_width">
					<uni-datetime-picker placeholder="开始时间" type="datetime" return-type="timestamp"
						v-model="coupons.useTime" />
					<uni-datetime-picker placeholder="结束时间" type="datetime" return-type="timestamp"
						v-model="coupons.useendTime" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<button class="tianjia" @click="list">添加</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				label_width: '26vw',
				// 基础表单数据
				coupons: {
					full: '',
					reduce: '',
					name: '',
					type: 1,
					startTime: "",
					endTime: "",
					limited: 1,
					useTime: "",
					useendTime: ""
				},
				// 单选数据源
				types: [{
					text: '满减券',
					value: 0
				}, {
					text: '打折券',
					value: 1
				}],
				// 分段器数据
				current: 0,
				items: ['满减券', '打折券'],
			}
		},
		methods: {
			onClickItem(e) {
				console.log(e);
				this.coupons.type = e.currentIndex
			},
			list() {
				if (this.coupons.name != '') {
					let that = this;
					this.$http({
						url: '/api/shanghuliebiao2/coupon',
						method: 'POST',
						data: this.coupons,
						success(res) {
							if (res.data.code == 200) {
								alert("添加成功")
								uni.navigateTo({
									url: '/pages/ryx/Coupons-Manage/Coupons-Manage'
								})
							}

						}
					})
				} else {
					alert("请输入信息")
				}
			},
		}
	}
</script>

<style>
	@import url("@/static/images/ryx/all.css");
	.coupons_body {
		width: 90vw;
		padding: 30rpx 20rpx;
		border-radius: 30rpx;
		background: #fff;
	}

	.tianjia {
		background-color: #2679f5;
		color: #fff;
		margin-top: 40rpx;
		width: 500rpx;
	}

	.example {
		margin-bottom: 22rpx;
	}

	.example view {
		height: 5vh;
		display: flex;
		flex-flow: row nowrap;
	}

	.example view input {
		width: 30%;
		border-bottom: 1px solid black;
	}

	.uni-forms-item__content {
		display: flex;
		align-items: center;
	}
</style>